<template>
  <el-card :body-style="{padding:'0 5px 5px 5px'}" style="margin-top: 10px" class=" ">
    <!--<template #header>-->
    <!--  <div class="m-flex m-flex-row m-aligns-center">-->
    <!--    <el-tag effect="light" class="m-ml-10">{{ queryParams.shiftCode || shiftCode }}</el-tag>-->
    <!--    <p class="m-text-color-primary m-tb-5 m-ml-10 m-font-weight-700">{{ $t('mes.ShiftDataSum') }}</p>-->
    <!--  </div>-->
    <!--</template>-->
    <el-row gutter="5" class="m-aligns-center">
      <el-col :span="3">
        <shift-time-card is-shift/>
      </el-col>
      <el-col :span="21">
        <el-row class="content-wrapper" :gutter="20">
          <el-col class="item-box" :span="8">
            <el-card shadow="hover" class="data-card" :body-style="{padding:'5px 30px'}">
              <div class="content">
                <div class="data-wrapper m-flex m-justify-center m-flex-col">
                  <div class="title text-info">{{ queryParams.productionLineCode || '-' }}</div>
                  <div class="title text-primary">{{ $t('mes.producedNumber') }}</div>
                  <div class="value">
                    <count-to :decimals="2" :startVal='total.sumQty.start' :endVal='total.sumQty.end'
                              prefix="" suffix=""
                              :duration='total.sumQty.duration'></count-to>
                    <span class="unit">pcs</span>
                  </div>
                </div>
                <div class="chart-wrapper">
                  <liquid-fill :num="Number(data.sumQtyPer || 0)"></liquid-fill>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col class="item-box" :span="8">
            <el-card shadow="hover" class="data-card" :body-style="{padding:'5px 30px'}">
              <div class="content">
                <div class="data-wrapper m-flex m-justify-center m-flex-col">
                  <div class="title text-info">{{ queryParams.productionLineCode || '-' }}</div>
                  <div class="title text-primary">{{ $t('mes.outputSupport') }}</div>
                  <div class="value">
                    <count-to :decimals="2" :startVal='total.totalOutputNum.start' :endVal='total.totalOutputNum.end'
                              prefix="" suffix=""
                              :duration='total.totalOutputNum.duration'></count-to>
                    <span class="unit">plt</span>
                  </div>
                </div>
                <div class="chart-wrapper">
                  <liquid-fill :num="Number(data.totalOutputNumPer || 0)"></liquid-fill>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col class="item-box" :span="8">
            <el-card shadow="hover" class="data-card" :body-style="{padding:'5px 30px'}">
              <div class="content">
                <div class="data-wrapper m-flex m-justify-center m-flex-col">
                  <div class="title text-info">{{ queryParams.productionLineCode || '-' }}</div>
                  <div class="title text-primary">{{ $t('mes.standardQty') }}</div>
                  <div class="value">
                    <count-to :decimals="2" :startVal='total.standardBuckleQuantity.start'
                              :endVal='total.standardBuckleQuantity.end'
                              prefix="" suffix=""
                              :duration='total.standardBuckleQuantity.duration'></count-to>
                    <span class="unit">kg</span>
                  </div>
                </div>
                <div class="chart-wrapper">
                  <liquid-fill :num="Number(data.standardBuckleQuantityPer || 0)"></liquid-fill>
                </div>
              </div>
            </el-card>
          </el-col>
          <!--    <el-col class="item-box" :span="6">-->
          <!--      <el-card shadow="hover" class="data-card" :body-style="{padding:'5px 30px'}">-->
          <!--        <div class="content">-->
          <!--         <div class="data-wrapper m-flex m-justify-center m-flex-col">-->
          <!--            <div class="title">{{ $t('mes.feedQty') }}</div>-->
          <!--            <div class="value">-->
          <!--              <count-to :decimals="2" :startVal='total.sumBuckleQty.start' :endVal='total.sumBuckleQty.end'-->
          <!--                        prefix="" suffix=""-->
          <!--                        :duration='total.sumBuckleQty.duration'></count-to>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div class="chart-wrapper">-->
          <!--            <liquid-fill :num="Number(data.sumBuckleQtyPer || 0)"></liquid-fill>-->
          <!--          </div>-->
          <!--        </div>-->
          <!--      </el-card>-->
          <!--    </el-col>-->
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { inject, reactive, ref, watch } from 'vue'
import { CountTo } from 'vue3-count-to'
import liquidFill from '@/components/common/liquidFill'
import ShiftTimeCard from '@/components/mes/common/shiftTimeCard.vue'

export default {
  name: 'lineSum',
  inject: ['queryParams', 'shiftCode'],
  props: {
    data: {
      type: Object,
      default: () => {
        // 总产出片数 总产出托数 总标准扣料量 总投料量
        return {
          sumQty: 0,
          totalOutputNum: 0,
          standardBuckleQuantity: 0,
          sumBuckleQty: 0,
          sumQtyPer: 0
        }
      }
    }
  },
  components: {
    ShiftTimeCard,
    CountTo,
    liquidFill
  },
  setup (props) {
    const total = reactive({})
    const activeLine = ref('JCPDLine1')
    const queryParams = inject('queryParams')
    // console.log)
    // 添加监听watch
    const typeArr = ['sumQty', 'totalOutputNum', 'standardBuckleQuantity', 'sumBuckleQty']
    typeArr.forEach(function (str, index) {
      total[str] = {
        start: 0,
        duration: 2000,
        ...{ end: props.data[str] || 0 }
      }
      if (str) {
        watch(() => props.data[str], () => {
          total[str].start = total[str].end
          total[str].end = props.data[str]
        })
      }
    })
    return {
      total,
      activeLine,
      queryParams
    }
  }
}
</script>

<style scoped lang="scss">
.content-wrapper {
  padding: 10px 0;
  height: 100%;

  .el-card__body {
    padding: 20px;
  }

  .data-card {
    border-radius: 10px;
    color: #999;

    .content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px 0 30px;
      box-sizing: border-box;

      .data-wrapper {
      }

      .chart-wrapper {
        margin-left: 10px;
      }

      .title {
        font-weight: 600;
        font-size: 16px;
        letter-spacing: 2px;
      }

      .text-info {
        color: #e6a23c;

        line-height: 1.2;
      }

      .text-primary {
        color: var(--el-color-primary);
        line-height: 1.5;
        font-size: 20px;
      }

      .value {
        font-weight: 700;
        font-size: 40px;
        color: black;
        line-height: 1.5;
      }

      .total {
        font-weight: 700;
        font-size: 14px;
      }
    }
  }
}

.unit {
  font-size: 10px;
  margin-left: 2px;
}
</style>
